<template>
    <el-row>
        <el-col :span=13>
          <el-card class="box-card" style="height:153px">
            <div slot="header" class="clearfix">
              <span>多智能体系统接受环境信息后做出决策的时间为102.7ms。
多智能体系统群体决策做出收敛的潮流决策时，给予协作的智能体协同奖励为1。对决策结果产生冲突的智能体，给予相应的惩罚为-1。</span>
            </div>
            <!-- 这里写 面板里面的内容-->
          </el-card>
        </el-col>
        <el-col :span=11>
          <el-card class="box-card-shang">
            <div slot="header" class="clearfix">
              <span>信息熵数据</span>
            </div>
             <!-- 这里写 面板里面的内容-->
             <el-image :src="photo.url" fit="cover" class="photo"></el-image>
             <p class="photo-name">{{photo.fileName}} </p>  
          </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span=13>
            <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>智能体确定系数表</span>
            </div>
             <!-- 这里写 面板里面的内容-->
             <el-table :data="tableData" stripe style="width: 100%;height: 100%;margin-top:5px;" height="450">
                <el-table-column prop="coefficient" label="不确定度系数" width="142" />
                <el-table-column prop="robot1" label="智能体1" width="90" />
                <el-table-column prop="robot2" label="智能体2" width="90" />
                <el-table-column prop="robot3" label="智能体2" width="90" />
                <el-table-column prop="robot4" label="智能体2" width="90" />
                <el-table-column prop="robot5" label="智能体2" width="90" />
                <el-table-column prop="robot6" label="智能体2" width="90" />
                <el-table-column prop="robot7" label="智能体2" width="90" />
            </el-table>
          </el-card>
        </el-col>
        <el-col :span=11>
           <el-card class="box-card-payOff">
            <div slot="header" class="clearfix">
              <span>智能体损益展示</span>
            </div>
             <!-- 这里写 面板里面的内容-->
            <div style="margin-top:65px;margin-left:40px;">
              <el-form :model="form" label-width="120px" inline>
                <el-form-item label="种群策略损益">
                  <el-input v-model="form.name" style="margin-left:28px;"/>
                </el-form-item>

                <el-form-item label="历史策略损益" label-width="122px">
                  <el-input v-model="form.history" style="margin-left:14px;"/>
                </el-form-item>

                <el-form-item label="显示策略后验损益"  label-width="148px">
                  <el-input v-model="form.display" />
                </el-form-item>
                <el-form-item label="种群策略置信度"  label-width="136px">
                  <el-input v-model="form.trust" />
                </el-form-item>

              </el-form>
            </div>
          </el-card>
        </el-col>
    </el-row>        
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref,watch } from "vue";
import wordImg from '@/assets/shanginfo.png';
const photo=ref({
  url:wordImg,
  fileName:'信息熵度量计算 : 0.2676'
})

const form = ref({
   name:'0.2401',
   history: '0.1472',
   display: '0.1483',
   trust: '0.934'
})

const tableData2 =ref([
  {
    groupPayOff: '0.2401',
    historyPayOff: '',
  }
])

const tableData = ref([
  {
    'coefficient':'决策策略不确定度',
    'robot1': '0.0598',
    'robot2': '0.0254',
    'robot3': '0.0005',
    'robot4': '0.0005',
    'robot5': '0.0002',
    'robot6': '0.0002',
    'robot7': '0.0001',
    'robot8': '0.0026'
  },
  {
    'coefficient':'观测状态不确定度',
    'robot1': '0.0826',
    'robot2': '0.0803',
    'robot3': '0.0945',
    'robot4': '0.0746',
    'robot5': '0.1103',
    'robot6': '0.0776',
    'robot7': '0.1014',
    'robot8': '0.1608'
  },
  {
    'coefficient':'多智能体间不确定度',
    'robot1': '0.0751',
    'robot2': '0.022',
    'robot3': '0.0573',
    'robot4': '0.0118',
    'robot5': '0.0338',
    'robot6': '0.0319',
    'robot7': '0.0346',
    'robot8': '0.0405'
  }
])
</script>

<style scoped lang="scss">
::v-deep .el-form-item__label {  
 color:rgb(245, 245, 245);
 width: 120px;
}

.el-input{
width: 120px;
}

.box-card {
  margin-bottom: 0px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
}

.box-card-payOff{
  margin-bottom: 0px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
  height: 513px;
}

.photo{
  width: 190px; /* 或者你想要的任何尺寸 */  
  height: auto;  
}
</style>
